<template>
    <div>
        Father: {{ count }} - {{ msg }}
        <Child v-model:count="count" v-model:msg="msg" />
        <RenderList :msg="msg" />
        <Function :msg="msg" :level="level">这事一个动态的h元素</Function>
        <AsyncCom />
    </div>
</template>

<script>
import Function from './function';
import Child from './child';
import { reactive, toRefs, defineAsyncComponent, computed, watch, watchEffect } from 'vue';

export default {
    components: {
        Child,
        Function,
        RenderList: {
            props: {
                msg: {
                    type: String,
                    required: true,
                },
            },
            render () {
                return (
                    <div>
                        {this.msg}
                    </div>
                );
            },
        },
        AsyncCom: defineAsyncComponent(() => import('@/components/NextPage')),
    },
    setup () {
        const state = reactive({
            count: 1,
            msg: 'zs',
            level: computed(() => state.count),
        });
        const handleClick = (val) => {
            console.log(val);
            state.count = val;
        };
        watch(
            () => state.level,
            (newVal, oldVal) => {
                console.log(newVal, oldVal);
            },
            {
                immediate: true,
            },
        );
        watchEffect(() => {
            console.log(state.count);
        });
        return {
            ...toRefs(state),
            handleClick,
        };
    },
};
</script>

<style>

</style>
